<template>
  <div v-if="menuPath" v-loading="loading" class="list-table noPad">
    <el-tabs v-if="menu && menu.children && menu.children.length > 0" ref="tabs" v-model="activeName" @tab-click="clickMenu">
      <el-tab-pane v-for="(item, key) in childMenuTabs" :key="key" :lazy="true" :label="$t(item.menuName)" :name="item.menuName" :class="item.component === 'folder/index' ? 'file' : ''">
        <component :is="menuPath" v-if="item.flag" ref="menuPath" :bus-type="busType" :parameter="parameter" />
      </el-tab-pane>
    </el-tabs>
    <component :is="menuPath" v-else ref="menuPath" :bus-type="busType" :parameter="parameter" />
  </div>
</template>
<script>
// import { childMenuList	} from '@/api/system/menu'
import { getAsyncComponent } from '@/utils'
import merge from 'webpack-merge'
import ProProcess from '../proProcess'

export default {
  name: 'MenuLayout',
  components: {
    ProProcess
  },
  props: {
    menuIdent: {
      type: String,
      default: ''
    },
    busType: {
      type: String,
      default: undefined,
      desc: '类型'
    }
  },
  data() {
    return {
      // 加载
      loading: false,
      // 选中页签名称
      activeName: '',
      // 项目ID
      dealId: this.$route.query.id,
      // 子页签
      childMenuTabs: [],
      // 组件地址
      menuPath: '',
      parameter: {},
      menu: undefined,
      currentMenu: {},
      busName: ''
    }
  },
  mounted() {
    this.$bus.$emit('async_done')
  },
  methods: {
    init(data) {
      console.log(data, '初始化信息')
      // this.loading = true
      // 菜单列表
      // childMenuList(this.menuIdent).then(response => {
      //   this.childMenuTabs = response.rows
      //   this.clickMenu(response.rows[0])
      //   this.loading = false
      // })
      this.$nextTick(() => {
        this.busName = data.busName
        if (data.menuPath) {
          this.importFormPath(data.menuPath)
          this.loading = false
          return
        }
        data.menu.busType = data.busType
        this.menu = data.menu
        if (this.menu?.children && this.menu.children.length > 0) {
          this.childMenuTabs = this.menu.children
          this.activeName = this.menu.children[0].menuName
          this.clickMenu(this.menu.children[0])
        } else {
          this.importFormPath(this.menu.component)
        }
        this.loading = false
      })
    },
    clickMenu(tab) {
      this.childMenuTabs && this.childMenuTabs.forEach(item => {
        if (item.menuName === tab.menuName || item.menuName === tab.name) {
          this.$nextTick(() => {
            this.$set(item, 'flag', true)
            this.currentMenu = tab.index ? this.childMenuTabs[Number(tab.index)] : tab
            console.log(this.currentMenu)
            this.importFormPath(item.component)
          })
        } else {
          this.$set(item, 'flag', false)
        }
      })
    },
    load() {
      this.$nextTick(() => {
        var dData = {}
        if (this.$refs.menuPath && this.$refs.menuPath[0]?.init !== undefined) {
          dData = {}
          console.log(this.currentMenu)
          dData.id = this.$route.query.id
          dData.busType = this.menu.busType
          dData.companyId = this.$route.query.companyId
          dData.menuId = this.currentMenu.menuId
          console.log(dData, '调用信息')
          this.$refs.menuPath[0].init(dData)
          this.$refs.menuPath[0].openLocation = 'Home'
        } else if (this.$refs.menuPath && this.$refs.menuPath?.init !== undefined) {
          dData = {}
          console.log(this.currentMenu)
          dData.id = this.$route.query.id
          dData.busType = this.menu.busType
          dData.companyId = this.$route.query.companyId
          dData.menuId = this.currentMenu.menuId
          dData.busName = this.busName
          console.log(dData, '调用信息')
          this.$refs.menuPath.init(dData)
          this.$refs.menuPath.openLocation = 'Home'
        }
      })
    },
    // 是否项目表单配置路径
    isOnlConfig(menuPath) {
      var dealType = sessionStorage.getItem('dealBaseFormDealType' + this.$route.query.id)
      var dealBaseFormFlag = localStorage.getItem('dealBaseFormFlag')
      var dealBaseFormTempletId = localStorage.getItem('dealBaseFormTempletId')
      var dealTypes = localStorage.getItem('configFormDealType')
      if (menuPath && menuPath.includes('deal/base/dealBaseForm') && dealTypes.indexOf(dealType) !== -1 && dealBaseFormFlag === 'configForm') {
        const newKey = menuPath.split('?')[1]
        menuPath = 'system/desform/release/onlineTemplate?queryId=' + dealBaseFormTempletId + '&type=deal'
        if (newKey) {
          menuPath = menuPath + '&' + newKey
        }
      }
      return menuPath
    },
    // 引入组件
    async importFormPath(menuPath) {
      if (menuPath !== null && menuPath !== '') {
        menuPath = this.isOnlConfig(menuPath)
        const newPath = menuPath.lastIndexOf('\/')
        var strPath = ''
        if (menuPath.indexOf('?') === -1) { // 不含问号
          console.log(menuPath)
          strPath = menuPath.substring(newPath + 1, menuPath.length)
          this.menuPath = getAsyncComponent('@/views/' + menuPath)
          this.parameter = {}
          this.parameter.menuPath = strPath
        } else {
          const index = menuPath.lastIndexOf('?')
          const sMenuPath = menuPath.substring(0, index)
          this.menuPath = getAsyncComponent('@/views/' + sMenuPath)
          strPath = sMenuPath.substring(sMenuPath.lastIndexOf('\/') + 1, sMenuPath.length)
          // 增加参数
          const newKey = menuPath.split('?')[1]
          var newstr = newKey.replace(/=/g, '":"')
          const objectKey = '{"' + newstr.replace(/&/g, '","') + '"}'
          this.parameter = JSON.parse(objectKey)
          this.parameter.menuPath = strPath
        }
        this.$router.push({ // 地址栏添加左侧菜单地址
          query: merge(this.$route.query, this.parameter)
        })
        this.listComponent()
      }
    },
    listComponent() {
      this.$bus.$once('async_done', () => {
        this.load()
      })
    }
  }
}

</script>

<style lang="scss" scoped>
/deep/.el-tabs .file.el-tab-pane {
  height: 80vh !important;
  .components-container.magicHome{
    left: 0 !important;
    top: 0 !important;
  }
}
</style>
